import React, { useEffect, useRef, useState } from 'react'
import { Card, Col, Row, List, Avatar, Drawer, Button } from 'antd';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import axios from 'axios'
import * as echarts from 'echarts';
import _ from 'lodash'
const { Meta } = Card;


export default function Home() {
  const [viewList, setviewList] = useState([])
  const [starList, setstarList] = useState([])
  const barRef = useRef()
  const pieRef = useRef()
  const [allList, setallList] = useState([])
  const [pieChart, setpieChart] = useState(null)
  const [visible, setvisible] = useState(false)

  const showDrawer = () => {
    setvisible(true);
  };
  const onClose = () => {
    setvisible(false);
  };

  useEffect(() => {
    axios.get("/news?publishState=2&_expand=category&_sort=view&_order=desc&_limit=6").then(res => {
      setviewList(res.data)
    })
  }, [])

  useEffect(() => {
    axios.get("/news?publishState=2&_expand=category&_sort=star&_order=desc&_limit=6").then(res => {
      // // console.log(res.data)
      setstarList(res.data)
    })
  }, [])
  useEffect(() => {

    axios.get("/news?publishState=2&_expand=category").then(res => {
      // console.log("--------", res.data)
      // // console.log()
      renderBarView(_.groupBy(res.data, item => item.category.title))

      setallList(res.data)
    })

    return () => {
      window.onresize = null
    }
  }, [])
  const renderBarView = (obj) => {
    var myChart = echarts.init(barRef.current);

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '新闻分类图示'
      },
      tooltip: {},
      legend: {
        data: ['数量']
      },
      xAxis: {
        data: Object.keys(obj),
        axisLabel: {
          rotate: "45",
          interval: 0
        }
      },
      yAxis: {
        minInterval: 1 //最小间隔
      },
      series: [{
        name: '数量',
        type: 'bar',
        data: Object.values(obj).map(item => item.length)
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


    window.onresize = () => {
      // // console.log("resize")
      myChart.resize()
    }
  }
  const renderPieView = (obj) => {
    //数据处理工作

    var currentList = allList.filter(item => item.author === username)
    var groupObj = _.groupBy(currentList, item => item.category.title)
    var list = []
    for (var i in groupObj) {
      list.push({
        name: i,
        value: groupObj[i].length
      })
    }
    var myChart;
    if (!pieChart) {
      myChart = echarts.init(pieRef.current);
      setpieChart(myChart)
    } else {
      myChart = pieChart
    }
    var option;

    option = {
      title: {
        text: '当前用户新闻分类图示',
        // subtext: '纯属虚构',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '发布数量',
          type: 'pie',
          radius: '50%',
          data: list,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    option && myChart.setOption(option);

  }
  const { username, region, role: { roleName } } = JSON.parse(localStorage.getItem("token"))
  return (
    <div>
      <div style={{ padding: "20px" }}>
        <Row gutter={16}>
          <Col span={8}>
            <Card title="用户最常浏览" bordered={true}>
              <List
                size="large"
                dataSource={viewList}
                renderItem={item => <List.Item key={item.id}>
                  <a href={`#/news-manage/preview/${item.id}`}>{item.title}</a>
                </List.Item>}
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card title="点赞最多" bordered={true}>
              <List
                size="large"
                dataSource={starList}
                renderItem={item => <List.Item key={item.id}>
                  <a href={`#/news-manage/preview/${item.id}`}>{item.title}</a>
                </List.Item>}
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card title="Card title" bordered={true}>
              <Card
                style={{ width: 300 }}
                cover={
                  <img
                    alt="example"
                    src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                  />
                }
                actions={[
                  <SettingOutlined
                    key="setting"
                    onClick={() => {
                      setTimeout(() => {
                        setvisible(true)

                        // init初始化
                        renderPieView()
                      }, 0)
                    }} />,
                  <EditOutlined key="edit" />,
                  <EllipsisOutlined key="ellipsis" />,
                ]}
              >
                <Meta
                  avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                  title={username}
                  description={
                    <div>
                      <b>{region ? region : "全球"}</b>
                      <span style={{
                        paddingLeft: "30px"
                      }}>{roleName}</span>
                    </div>
                  }
                />
              </Card>
            </Card>
          </Col>
        </Row>
        <Drawer
          width="500px"
          title="个人新闻分类"
          placement="right"
          closable={true}
          onClose={() => {
            setvisible(false)
          }}
          visible={visible}
        >
          <div ref={pieRef} style={{
            width: '100%',
            height: "400px",
            marginTop: "30px"
          }}></div>
        </Drawer>
        <div ref={barRef} style={{ height: "400px", width: "100%", paddingTop: "50px", }}></div>
      </div>
    </div>
  )
}